<template>
    <div>
        <div class="parent" v-if="propValue.tabIndex == 0">
            <img class="image" :style="{width:propValue.imgwidth+'px', height:propValue.imgheight+'px'}" v-for="(item,i) in propValue.img" :key="i" :src="item" alt="">
        </div>

        <div class="container" :style="{'column-count':propValue.lineType}" v-if="propValue.tabIndex == 3">
            <div class="item" v-for="(item,i) in propValue.img" :key="i">
                <img  :src="item" alt="">
            </div>
        </div>

          <div  v-show="propValue.tabIndex == 4">
          <div class="wrapper">
                <div class="background">
                    <img :src="propValue.backgroundImage" alt="">

                    <div class="after" :style="{'background-image':setBgStyle(propValue.backgroundColor)}"></div>
                </div>
                <div class="item-bg"></div>
                <div class="news-slider" :class="[true? propValue.nameKey+'' : '']" >
                    <div class="news-slider__wrp swiper-wrapper">
                    <div class="news-slider__item swiper-slide" v-for="(item,i) of propValue.swiperList" :key="i">
                        <a href="#" class="news__item">
                        <div class="news-date">
                            <span class="news-date__title">{{item.day}}</span>
                            <span class="news-date__txt">{{item.month}}</span>
                        </div>
                        <div class="news__title">
                            {{item.title1}}<br>{{item.title2}}
                        </div>
                        <p class="news__txt">
                            {{item.text}}
                        </p>

                        <div class="news__img">
                            <img :src="item.img" alt="news">
                        </div>
                        </a>
                    </div>
                    </div>

                    <div class="news-slider__ctr">

                    <div class="news-slider__arrows">
                        <button class="news-slider__arrow news-slider-prev" :class="[true? `news-slider-prev${propValue.nameKey}` : '']">
                        <span class="icon-font">
                            <svg class="icon icon-arrow-left"><use xlink:href="#icon-arrow-left"></use></svg>
                        </span>
                        </button>
                        <button class="news-slider__arrow news-slider-next" :class="[true? `news-slider-next${propValue.nameKey}` : '']">
                        <span class="icon-font">
                            <svg class="icon icon-arrow-right"><use xlink:href="#icon-arrow-right"></use></svg>
                        </span>
                        </button>
                    </div>

                    <div class="news-slider__pagination"></div>
                    </div>
                </div>

                </div>
                <svg hidden="hidden" id="icon">
                <defs>
                    <symbol id="icon-arrow-left" viewBox="0 0 32 32">
                    <title>arrow-left</title>
                    <path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z"></path>
                    </symbol>
                    <symbol id="icon-arrow-right" viewBox="0 0 32 32">
                    <title>arrow-right</title>
                    <path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z"></path>
                    </symbol>
                </defs>
                </svg>
        </div>
    </div>
</template>

<script>

export default {
    components: {
    },
    props: {
        propValue: {
            type: Object,
            default: () => {},
        },
        element: {
            type: Object,
            default: () => {},
        },
        swiperList: {
            type: Array,
            default: () => {},
        },
    },
    data() {
        return {
        };
    },
    mounted(){
          this.swiperInit(this.propValue)
    },
    methods: {
      setBgStyle(color){
        // background-image: linear-gradient(30deg, rgba(255, 255, 255, 0.6) 0%, #0E5DC4 100%);
        return 'linear-gradient(30deg,'+color.left +'0%,'+color.right + '100%)!important';
      },
        swiperInit(value){
            var bg = document.querySelector('.item-bg');
            var swiper = new Swiper(`.${value.nameKey}`, {
                effect: 'coverflow',
                grabCursor: true,
                loop: true,
                centeredSlides: true,
                keyboard: true,
                spaceBetween: 0,
                slidesPerView: 'auto',
               observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                speed: 300,
                coverflowEffect: {
                    rotate: 0,
                    stretch: 0,
                    depth: 0,
                    modifier: 3,
                    slideShadows: false
                },
                breakpoints: {
                    480: {
                        spaceBetween: 0,
                        centeredSlides: true
                    }
                },
                simulateTouch: true,
                navigation: {
                    nextEl: `.news-slider-next${value.nameKey}`,
                    prevEl: `.news-slider-prev${value.nameKey}`
                },
                pagination: {
                    el: '.news-slider__pagination',
                    clickable: true
                },
            });
            swiper.on('touchEnd', function () {
                    $('.news__item').removeClass('active');
                    // $('.swiper-slide-active .news__item').addClass('active');
                });
                swiper.on('slideChangeTransitionEnd', function () {
                    $('.news__item').removeClass('active');
                    var activeItem = document.querySelector('.swiper-slide-active');
                    var sliderItem = activeItem.querySelector('.news__item');
                    $(`.${value.nameKey} .swiper-slide-active .news__item`).addClass('active');
                    var x = sliderItem.getBoundingClientRect().left;
                    var y = sliderItem.getBoundingClientRect().top;
                    var width = sliderItem.getBoundingClientRect().width;
                    var height = sliderItem.getBoundingClientRect().height;
                    $('.item-bg').addClass('active');
                    bg.style.width = width + 'rem';
                    bg.style.height = height + 'rem';
                    bg.style.transform = 'translateX(' + x + 'rem ) translateY(' + y + 'rem)';
                });

        },
    },
};
</script>
<style>

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.background {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.background .after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(30deg, rgba(255, 255, 255, 0.6) 0%, #0E5DC4 100%);
  opacity: 0.9;
}
.background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.item-bg {
  /* width: 300px; */
  /* height: 500px; */
  position: absolute;
  top: 30rem;
  /* background: #fff; */
  border-radius: 10rem;
  /* box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25); */
  opacity: 0;
  transition: all .3s;
  left: -30rem;
}
.item-bg.active {
  left: 0;
  top: 0;
  opacity: 1;
}

.news-slider {
  z-index: 2;
  max-width: 1300rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60rem;
}
@media screen and (max-width: 1300px) {
  .news-slider {
    max-width: 1000rem;
  }
}
@media screen and (max-width: 576px) {
  .news-slider {
    margin-top: 45rem;
  }
}
.news-slider__wrp {
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}
.news-slider__item {
  width: 33%;
  flex-shrink: 0;
}
/* @media screen and (max-width: 992px) {
  .news-slider__item {
    width: 340px;
  }
} */
.news-slider__item.swiper-slide {
  opacity: 0;
  pointer-events: none;
  transition:  .8s;
}
.news-slider__item.swiper-slide:hover {
    background: #fff;
    opacity: 1;
    transition:  .8s;
  box-shadow: 0 6rem 26rem 6rem rgba(0, 0, 0, 0.25);
    border-radius: 10rem;
}
.news-slider__item.swiper-slide-active, .news-slider__item.swiper-slide-prev, .news-slider__item.swiper-slide-next {
  opacity: 1;
  pointer-events: auto;
}
.news-slider__ctr {
  position: relative;
  z-index: 12;
}
.news-slider__arrow {
  background: #fff;
  border: none;
  display: inline-flex;
  width: 50rem;
  height: 50rem;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6rem 26rem 6rem rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  z-index: 12;
  cursor: pointer;
  outline: none !important;
}
.news-slider__arrow:focus {
  outline: none !important;
}
.news-slider__arrow .icon-font {
  display: inline-flex;
}
.news-slider__arrow.news-slider-prev {
  left: 15rem;
  transform: translateY(-50%);
}
.news-slider__arrow.news-slider-next {
  right: 15rem;
  transform: translateY(-50%);
}
.news-slider__pagination {
  text-align: center;
  margin-top: 50rem;
}
.news-slider__pagination .swiper-pagination-bullet {
  width: 13rem;
  height: 10rem;
  display: inline-block;
  background: #fff;
  opacity: .2;
  margin: 0 5rem;
  border-radius: 20rem;
  transition: opacity .5s, background-color .5s, width .5s;
  transition-delay: .5s, .5s, 0s;
}
.news-slider__pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: #ffffff;
  width: 100rem;
  transition-delay: 0s;
}
/* @media screen and (max-width: 576px) {
  .news-slider__pagination .swiper-pagination-bullet-active {
    width: 70px;
  }
} */
.news__item {
  padding: 40rem;
  color: #fff;
  border-radius: 10rem;
  display: block;
  transition: all .3s;
}
@media screen and (min-width: 800px) {
  .news__item:hover {
    color: #222222;
    transition-delay: .1s;
  }
  .news__item:hover .news-date, .news__item:hover .news__title, .news__item:hover .news__txt {
    opacity: 1;
    transition-delay: .1s;
  }
  .news__item:hover .news__img {
    box-shadow: none;
  }
}
.news__item.active {
  color: #222222;
  background: #fff;
}
.news__item.active .news-date, .news__item.active .news__title, .news__item.active .news__txt {
  opacity: 1;
}
.news__item.active .news__img {
  box-shadow: none;
}
@media screen and (max-width: 992px) {
  .news__item {
    padding: 30rem;
  }
}
@media screen and (max-width: 576px) {
  .news__item {
    padding: 20rem;
  }
}
.news-date {
  padding-bottom: 20rem;
  margin-bottom: 20rem;
  border-bottom: 2rem solid;
  display: inline-block;
  opacity: .7;
  transition: opacity .3s;
}
@media screen and (max-width: 576px) {
  .news-date {
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    padding-bottom: 0;
  }
}
.news-date__title {
  display: block;
  font-size: 32rem;
  margin-bottom: 10rem;
  font-weight: 500;
}
@media screen and (max-width: 576px) {
  .news-date__title {
    margin-right: 10rem;
  }
}
.news-date__txt {
  font-size: 16rem;
}
.news__title {
  font-size: 25rem;
  font-weight: 500;
  opacity: .7;
  margin-top: 10rem;
  margin-bottom: 15rem;
  transition: opacity .3s;
}
@media screen and (max-width: 576px) {
  .news__title {
    font-size: 22rem;
    margin-bottom: 10px;
  }
}
.news__txt {
  margin: 10rem 0;
  line-height: 1.6em;
  font-size: 15rem;
  opacity: .7;
  transition: opacity .3s;
}
.news__img {
  border-radius: 10rem;
  box-shadow: 0 6rem 26rem 6rem rgba(0, 0, 0, 0.25);
  height: 200rem;
  margin-top: 30rem;
  width: 100%;
  transition: all .3s;
  transform-origin: 0% 0%;
}
@media screen and (max-width: 576px) {
  .news__img {
    height: 180rem;
    margin-top: 20rem;
  }
}
.news__img img {
  max-width: 100%;
  border-radius: 10rem;
  height: 100%;
  width: 100%;
}
#icon{
	display:none;}
</style>
<style lang="scss" scoped>
.container{
    // width: 600px;
    // column-count: 2;
    column-gap: 10rem;
}
.item img{
    width: 100%;
    // margin: 10px;
    margin-bottom: 10rem;
}
// 图片样式
.parent {
    margin: 10rem;
}
.image {
    // width: 30%;
    // height: 30%;
    // width: 100px;
    // height: 100px;
    object-fit: cover;
}
.parent {
    display: flex;
    flex-wrap: wrap;
    img {
        margin: 10rem;
    }
}
</style>
